<template>
  <view class="container">
    <uni-forms ref="form" :modelValue="form" labelWidth="120px" labelPosition="top">
      <view class="hidden-title">检修审核</view>
      <view class="flex items-center blue" style="cursor: pointer" @click="plusRow">
        <image class="icon-style" src="/static/images/icon-add.png" mode="aspectFill"></image>
        添加
      </view>
      <view class="background-white bor-top">
        <template v-for="(item, index) in form.deviceExamineBillEntityList">
          <uni-forms-item
            label="作业票证类型"
            required
            :rules="[{ required: true, errorMessage: '作业票证类型必填' }]"
            :key="item.id"
            :name="['deviceExamineBillEntityList', index, 'type']"
          >
            <view class="form-item">
              <cu-cell
                title="作业票证类型"
                required
                link
                placeholder="请选择"
                :description="form.deviceExamineBillEntityList[index].type"
                @click="billClick(index)"
              ></cu-cell>
            </view>
          </uni-forms-item>
          <uni-forms-item
            label="票证编号"
            required
            :rules="[{ required: true, errorMessage: '票证编号项必填' }]"
            :key="item.id"
            :name="['deviceExamineBillEntityList', index, 'code']"
          >
            <view class="form-item">
              <cu-cell
                title="票证编号"
                required
                link
                placeholder="请选择"
                :description="form.deviceExamineBillEntityList[index].code"
                @click="ticketDiaOpen()"
              ></cu-cell>
            </view>
          </uni-forms-item>
        </template>
      </view>
    </uni-forms>
    <view class="submit-group">
      <button class="u-button" :ripple="true" @click="submit">提交</button>
    </view>
    <dict-picker ref="billDict" title="作业票证类型" dictType="spw_special_work_type" @confirm="billConfirm">
    </dict-picker>
    <uni-popup ref="popup" :is-mask-click="false" type="center">
      <view class="popup-wrap">
        <uni-table ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
          <uni-tr>
            <!-- <uni-th width="40" align="center">序号</uni-th> -->
            <uni-th width="60" align="center">作业票类型</uni-th>
            <uni-th width="60" class="ticket-code" align="center">作业票编号</uni-th>
            <uni-th align="center">选择</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in ticketData" :key="index">
            <!-- <uni-td>{{ index+1 }}</uni-td> -->
            <uni-td>{{ item.specialWorkTypeLabel }}</uni-td>
            <uni-td>{{ item.ticketCode }}</uni-td>
            <uni-td>
              <radio v-model="item.isChecked" @click="handleChange(item)"></radio>
              <!-- <uni-data-checkbox v-model="item.isChecked" :localdata="radioList" @change="handleChange(item, index)"></uni-data-checkbox> -->
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="button-wrap">
          <!-- <view class="button button-confirm" @click="handePopupConfirm">确定</view> -->
          <view class="button button-cancle" @click="handlePopupCancel">取消</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import { bill, ticketList } from '@/api/repair/repair.js'
export default {
  components: {
    CuCellGroup,
    DictPicker
  },
  data() {
    return {
      id: '',
      procTaskId: '',
      form: {
        deviceExamineBillEntityList: [{ type: '', billType: '', billId: '', code: '' }]
      },
      index: '',
      ticketData: [],
      ticketVal: '',
      radioList: [
        {
          text: 'g',
          value: 0
        }
      ]
    }
  },
  onLoad(option) {
    if (!option.data) return
    let data = JSON.parse(option.data)
    this.id = data.id
    this.procTaskId = data.procTaskId
  },
  methods: {
    plusRow() {
      let row = { billType: '', billId: '', code: '' }
      this.form.deviceExamineBillEntityList.push(row)
    },
    billClick(index) {
      this.index = index
      this.$refs.billDict.open()
    },
    billConfirm(obj) {
      this.form.deviceExamineBillEntityList[this.index].type = obj.name
      this.form.deviceExamineBillEntityList[this.index].billType = obj.value
      this.getTicketList({
        workType: obj.value
      })
    },
    ticketDiaOpen() {
      this.$refs.popup.open()
    },
    getTicketList(data) {
      ticketList(data).then((res) => {
        this.ticketData = res.rows
        this.ticketData.map((m) => {
          m.isChecked = m.ticketCode
        })
      })
    },
    handlePopupCancel() {
      this.$refs.popup.close()
    },
    async handePopupConfirm() {
      await this.$refs.popupForm.validate()
      this.$refs.popup.close()
    },
    handleChange(row) {
      // console.log('row', row)
      // console.log('index', this.index)
      this.form.deviceExamineBillEntityList[this.index].code = row.ticketCode
      this.form.deviceExamineBillEntityList[this.index].billId = row.ticketId
      this.$refs.popup.close()
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        let data = {
          id: this.id,
          procTaskId: this.procTaskId,
          deviceExamineWorkflowEntity: {
            examineId: this.id,
            opinionType: 'PASS'
          },
          ...this.form
        }
        bill(data).then((res) => {
          this.$modal.showToast('处理成功')
          uni.$emit('refresh')
          uni.navigateBack()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 200rpx;

  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.blue {
  color: #88b4c4;
}

.icon-style {
  width: 52rpx;
  height: 42rpx;
  padding-right: 10rpx;
}
.input {
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  height: 60rpx;
}

.popup-wrap {
  width: 650rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;

  .button-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150rpx;

    .button {
      width: 246rpx;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 44rpx;
      text-align: center;
      font-size: 30rpx;
      display: block;
      margin: 0 12rpx;
    }

    .button-confirm {
      background: #454a5e;
      color: #ffffff;
    }

    .button-cancle {
      background: #e3e4eb;
      color: #454a5e;
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx 30rpx;
  color: #999;
}

.button-confirm {
  margin: 40rpx auto 0;
  width: 600rpx;
  line-height: 98rpx;
  background: #454a5e;
  border-radius: 50rpx;
  font-size: 36rpx;
  color: #ffffff;
  text-align: center;
}
</style>
